<template>
  <view class="combinations-container">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="search-box">
        <input 
          type="text" 
          v-model="searchKeyword" 
          placeholder="搜索组合名称" 
          @confirm="handleSearch"
          class="search-input"
        />
        <button class="search-btn" @click="handleSearch">搜索</button>
        <button class="reset-btn" @click="resetSearch">重置</button>
      </view>
    </view>
    
    <!-- 组合列表 -->
    <view class="combinations-list">
      <view v-if="loading" class="loading-wrapper">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载中...</text>
      </view>
      
      <view v-else-if="combinations.length === 0" class="empty-tip">
        <image src="/static/images/empty.png" mode="aspectFit" class="empty-image"></image>
        <text class="empty-text">暂无组合数据</text>
        <button class="explore-btn" @click="navigateTo('/pages/index/index')">返回首页</button>
      </view>
      
      <view v-else class="combinations-grid">
        <view 
          v-for="(item, index) in combinations" 
          :key="item.id" 
          class="combination-item"
          @click="navigateTo(`/pages/style/combination?id=${item.id}`)"
        >
          <image 
            :src="item.coverImage || '/static/images/default-cover.png'" 
            mode="aspectFill" 
            class="combination-image"
          ></image>
          <view class="combination-info">
            <view class="combination-name">{{ item.name }}</view>
            <view class="combination-description" v-if="item.description">
              {{ item.description.length > 20 ? item.description.substring(0, 20) + '...' : item.description }}
            </view>
            <view class="combination-stats">
              <view class="stat-item">
                <text class="stat-icon">👁️</text>
                <text class="stat-value">{{ formatNumber(item.useCount || 0) }}</text>
              </view>
              <view class="stat-item">
                <text class="stat-icon">❤️</text>
                <text class="stat-value">{{ formatNumber(item.likeCount || 0) }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 加载更多 -->
    <view v-if="combinations.length > 0 && !loading" class="load-more">
      <text v-if="!hasMore">没有更多数据了</text>
      <button v-else class="load-more-btn" @click="loadMore">加载更多</button>
    </view>
  </view>
</template>

<script>
import { styleApi } from '@/utils/api.js';

export default {
  data() {
    return {
      // 组合列表数据
      combinations: [],
      // 搜索条件
      searchKeyword: '',
      // 分页参数
      pageNum: 1,
      pageSize: 10,
      hasMore: true,
      loading: false
    };
  },
  
  onLoad() {
    this.loadCombinations();
  },
  
  // 下拉刷新
  onPullDownRefresh() {
    this.resetSearch();
    uni.stopPullDownRefresh();
  },
  
  // 触底加载更多
  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.loadMore();
    }
  },
  
  methods: {
    // 格式化数字（添加千位分隔符或缩写大数）
    formatNumber(num) {
      if (num >= 10000) {
        return (num / 10000).toFixed(1) + 'w';
      } else if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'k';
      }
      return num.toString();
    },
    
    // 加载组合列表
    loadCombinations(isLoadMore = false) {
      if (this.loading) return;
      
      this.loading = true;
      
      // 如果不是加载更多，重置页码
      if (!isLoadMore) {
        this.pageNum = 1;
        this.combinations = [];
        this.hasMore = true;
      }
      
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        keyword: this.searchKeyword
      };
      
      styleApi.getAllCombinations(params).then(res => {
        if (res.code === 200) {
          const newData = res.data.list || [];
          
          if (isLoadMore) {
            this.combinations = [...this.combinations, ...newData];
          } else {
            this.combinations = newData;
          }
          
          this.hasMore = newData.length >= this.pageSize;
        } else {
          uni.showToast({
            title: res.message || '加载失败',
            icon: 'none'
          });
        }
      }).catch(err => {
        console.error('加载组合列表失败', err);
        uni.showToast({
          title: '加载失败，请检查网络',
          icon: 'none'
        });
      }).finally(() => {
        this.loading = false;
      });
    },
    
    // 加载更多
    loadMore() {
      if (this.hasMore && !this.loading) {
        this.pageNum++;
        this.loadCombinations(true);
      }
    },
    
    // 搜索处理
    handleSearch() {
      this.loadCombinations();
    },
    
    // 重置搜索
    resetSearch() {
      this.searchKeyword = '';
      this.loadCombinations();
    },
    
    // 页面导航
    navigateTo(url) {
      uni.navigateTo({
        url
      });
    }
  }
};
</script>

<style lang="scss">
.combinations-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 30rpx;
  
  .page-header {
    padding: 30rpx;
    background-color: #fff;
    
    .search-box {
      display: flex;
      align-items: center;
      
      .search-input {
        flex: 1;
        height: 70rpx;
        background-color: #f5f5f5;
        border-radius: 35rpx;
        padding: 0 30rpx;
        font-size: 28rpx;
      }
      
      .search-btn, .reset-btn {
        margin-left: 20rpx;
        height: 70rpx;
        line-height: 70rpx;
        font-size: 28rpx;
        padding: 0 30rpx;
        border-radius: 35rpx;
      }
      
      .search-btn {
        background-color: #FF69B4;
        color: #fff;
      }
      
      .reset-btn {
        background-color: #f5f5f5;
        color: #666;
      }
    }
  }
  
  .combinations-list {
    padding: 20rpx;
    
    .loading-wrapper {
      padding: 50rpx 0;
      text-align: center;
      
      .loading-spinner {
        width: 60rpx;
        height: 60rpx;
        border: 4rpx solid #f3f3f3;
        border-top: 4rpx solid #FF69B4;
        border-radius: 50%;
        margin: 0 auto 20rpx;
        animation: spin 1s linear infinite;
      }
      
      .loading-text {
        font-size: 28rpx;
        color: #999;
      }
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    }
    
    .empty-tip {
      padding: 100rpx 0;
      text-align: center;
      
      .empty-image {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 30rpx;
      }
      
      .empty-text {
        font-size: 28rpx;
        color: #999;
        margin-bottom: 30rpx;
      }
      
      .explore-btn {
        display: inline-block;
        background-color: #FF69B4;
        color: #fff;
        font-size: 28rpx;
        padding: 15rpx 40rpx;
        border-radius: 35rpx;
      }
    }
    
    .combinations-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      
      .combination-item {
        width: 48%;
        background-color: #fff;
        border-radius: 12rpx;
        overflow: hidden;
        margin-bottom: 20rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
        
        .combination-image {
          width: 100%;
          height: 300rpx;
        }
        
        .combination-info {
          padding: 20rpx;
          
          .combination-name {
            font-size: 30rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 10rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
          .combination-description {
            font-size: 24rpx;
            color: #666;
            margin-bottom: 15rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
          .combination-stats {
            display: flex;
            justify-content: flex-start;
            
            .stat-item {
              display: flex;
              align-items: center;
              margin-right: 20rpx;
              
              .stat-icon {
                font-size: 24rpx;
                margin-right: 6rpx;
              }
              
              .stat-value {
                font-size: 24rpx;
                color: #999;
              }
            }
          }
        }
      }
    }
  }
  
  .load-more {
    text-align: center;
    padding: 30rpx 0;
    color: #999;
    font-size: 28rpx;
    
    .load-more-btn {
      display: inline-block;
      background-color: #fff;
      color: #FF69B4;
      border: 1rpx solid #FF69B4;
      font-size: 28rpx;
      padding: 10rpx 40rpx;
      border-radius: 35rpx;
      margin-top: 10rpx;
    }
  }
}
</style>
